<template>
    <view class="page">
        <!-- 文章列表展示区域 -->
        <view class="article">
            <block v-for="(article, index) in articleList" :key="index">
                <view class="article-item-1" v-if="article.big">
                    <view class="article-item-media" v-if="article.hasVideo">
                        <video :src="article.video" controls></video>
                    </view>
                    <view class="article-item-image" v-else>
                        <image :src="article.image"></image>
                    </view>
                    <view class="below-big-image" v-if="index === 0">
						
                        <!-- 这里放置"我要看"等内容 -->
                        <block v-for="(item, i) in contentdata":key="i">
                            <view class="list-cont" @click="tabs(i)":class="{active: i == num}">
                                <view>
                                    <text class="con-text-a">{{item.title}}</text>
                                </view>
                                <view>
                                    <text class="con-text-b":class="{activeb: i == num}">{{item.labei}}</text>
                                </view>
                            </view>
                        </block>
						
                    </view>
                </view>

                <view class="article-item-2" v-else @click="toDetail(article)">
                    <view class="article-item-media" v-if="article.hasVideo">
                        <video :src="article.video" controls></video>
                    </view>
                    <view class="article-item-image" v-else>
                        <image :src="article.image"></image>
                    </view>
                    <view class="article-item-tilte">
                        <text>{{article.time}}</text>
                        <text>{{article.title}}</text>
                        <text>{{article.author}}</text>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
	export default {
		name:"tab",
		data() {
			return {
				num:0,
				contentdata:[
					{
						title:"我要看",
						labei:"looking"
					},
					{
						title:"我要玩",
						labei:"playing"
					},
					{
						title:"我要游",
						labei:"traveling"
					},
					{
						title:"我要吃",
						labei:"eatting"
					},
					{
						title:"我要住",
						labei:"living"
					}
				],
				// 示例图片尺寸为 4:3
				articleList: [
					{
						image: '/static/zengle/风景.jpg',
						big: true, // 大图显示
					},
					{
						title: '走进齐齐哈尔，邂逅扎龙湿地之美。', 
						image: '/static/zengle/烤肉.jpg',
						author: '江云',
						time: '40秒前'
					},
					{
						title: '鹤舞龙腾地，魅力齐齐哈尔。', 
						image: '/static/zengle/th.jpg',
						author: '不吃香菜',
						time: '两天前'
					},
					{
						title: '魅力鹤城齐齐哈尔，大自然馈赠的湿地画卷。', 
						image: '/static/zengle/2.jpg',
						author: '上好佳',
						time: '三天前'
					},
					{
						title: '齐齐哈尔晚霞，似火如锦，醉美边城。', 
						image: '/static/zengle/晚霞.jpg',
						author: '明天会好',
						time: '四天前'
					},
					{
						title: '与其向往，，不如出发 ，向着草原的方向', 
						image: '/static/zengle/风景2.jpg',
						time: '四天前',
						big: true, // 大图显示
					},
				],
				currentTabIndex: 0 // 新增用于记录当前选中的选项卡索引
			};
		},
		onLoad() {
		        
		    },
		
		methods: {
			toDetail(article) {
			      // 导航到文章详情页，并传递文章ID或其他标识符
			      uni.navigateTo({
			        url: '/pages/tui-jian/wen-zhang?articleId=' + article.id
			      });
			    },
				
		    tabs(index) {
		        console.log(index);
		        this.num = index;
		        this.currentTabIndex = index;
		
		        // 根据点击的索引获取对应的分类标识
		        const selectedCategory = this.contentdata[index].labei;
		
		        // 过滤文章列表，只显示与所选分类相关的文章
		        this.filteredArticleList = this.articleList.filter(article => article.category === selectedCategory);
		    }
		}
	}
</script>

<style scoped lang="scss" >
	.tab-bar {
	    display: flex;
	    justify-content: space-around;
	    background: #fff;
	    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}
	
	.tab-item {
	    padding: 10rpx 20rpx;
	    cursor: pointer;
	    &:hover {
	        background: #f0f0f0;
	    }
	}
	
	.active.tab-item {
	    background: linear-gradient(to right, #ccffff 0%, #ffcc00 100%);
	    color: #fff;
	}
	.below-big-image {
	    margin-top: 10px; // 根据实际需求调整与大图之间的间距
	    display: flex;
	    flex-direction: row;
	    justify-content: space-around; // 可根据需求调整子元素的排列方式
	}
	.active{
		background-image:linear-gradient(to right,#ccffff 0%,#ffcc00 100%) ;
		border-top-right-radius: 50upx;
	}
	.activeb{
		color: #292c33 !important;
		font-size: 23upx !important;
	}
	.scrool{
		white-space: nowrap;
		width: 100%;
		position: absolute;left: 0;right: 0;
		background: #FFFFFF;
		padding: 20upx 0;
	}
	.con-text-a{
		color: #292c33;
		font-size: 30upx;
		font-weight: bold;
	}
	.con-text-b{
		color: #9ea0a5;
		font-size: 23upx;
	}
	.list-cont{
		width: 180upx;
		display: inline-block;
		text-align: center;
	}
	page{
		background: #f5f5f5;
	}
	
	.content {
		padding: 30rpx;
	}
	
	.col {
		overflow: hidden;
		position: relative;
		overflow: hidden;
		margin-bottom: 0rpx;
	
		.block {
			position: absolute;
			width: 100%;
			height: 390rpx;
			background-color: rgba($color: #000000, $alpha: .3);
			left: 0;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;
	
			.sanjia {
				width: 0;
				height: 300;
				border-top: 12px solid transparent;
				border-left: 17px solid #FFFFFF;
				border-bottom: 12px solid transparent;
			}
		}
	}
	
	.page {
		padding: 15rpx;
		
		.article{
			
			.article-item-1{
				background: #fff;
				box-shadow: 4rpx 4rpx 6rpx #ccc;
				margin-bottom: 20rpx;
							
				&:active{
					background: #f0f0f0;
				}
							
				.article-item-image{
					image{
						width: 720rpx;
						height: calc(720rpx * 0.65);
					}
				}
				
				.article-item-title{
					padding: 15rpx;
					
					text{
						font-size: 12px;
						color: #777;
						display: block;
						
						&:nth-child(2){
							font-size: 12px;
							color: #000;
							font-weight: bold;
							
						}
					}
				}
			}
			
			.article-item-2{
				margin-bottom: 20rpx;
				display: flex;
				background: #fff;
				box-shadow: 4rpx 4rpx 6rpx #ccc;
				height: calc(200rpx * 0.75);
				
				
				&:active{
					background: #f0f0f0;
				}
				
				.article-item-media {
				                video {
				                    width: 100%;
				                    height: auto;
									
				                }
				            }
							
				.article-item-image{
					image{
						width: 200rpx;
						height: calc(200rpx * 0.75);
					}
				}
				
				.article-item-tilte{
					
					padding-left: 15rpx;
					
					text{
						display: block;
						font-size: 12px;
						color: #777;
						
						&:nth-child(2){
							padding: 5rpx 0;
							font-size: 12px;
							color: #000;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
</style>